<div class="ibox-title">
    <h3>{{selectedItem.title}} |
        <small>{{selectedItem.description}}</small>
        <div ibox-tools></div>
    </h3>
</div>

<div class="ibox-content">
    <freebase-tags tag-context="selectedItem.contexts" add-tag-callback="addGroupTagForView"
                   is-create='isCreateObject'></freebase-tags>
</div>

<div class="ibox-content">
    <div class="form-group"><label>{{selectedItem.title}}'s fields</label></div>
    <script type="text/ng-template" id="content_renderer.html">
        <div ui-tree-handle class="tree-node tree-node-content">
            <a class="pull-right btn btn-white btn-xs" data-nodrag ng-click="showContent(fieldKey, contentKey)"><span
                    class="fa fa-eye"></span></a>
            {{node.owner}}'s content
        </div>
    </script>
    <script type="text/ng-template" id="field_renderer.html">
        <div ui-tree-handle class="tree-node tree-node-content">
            <a class="pull-right btn btn-white btn-xs" data-nodrag ng-click="addButtonClick(fieldKey)"><span
                    class="fa fa-plus"></span></a>
            <a class="btn btn-primary btn-xs" data-nodrag ng-click="toggle(this)"><span class="fa"
                                                                                        ng-class="{'fa-angle-down': collapsed, 'fa-angle-right': !collapsed}"></span></a>
            {{node.name}}(Type:{{node.type.name}})
        </div>
        <ol ui-tree-nodes="" ng-model="node.content" ng-class="{hidden: collapsed}">
            <li ng-repeat="(contentKey, node) in node.content" ui-tree-node ng-include="'content_renderer.html'">
            </li>
        </ol>
    </script>
    <div ui-tree id="tree-root">
        <ol ui-tree-nodes ng-model="selectedItem.fields">
            <li ng-repeat="(fieldKey,node) in selectedItem.fields" ui-tree-node ng-include="'field_renderer.html'"></li>
        </ol>
    </div>
</div>

<div class="ibox-content">
    <a class="btn btn-lg btn-primary pull-right"
       ng-click="joinGroup()"
       ng-hide="isCurrentUserAttended()"><i
            class="fa fa-thumbs-up"></i>Join</a>

    <a class="btn btn-lg btn-danger pull-right"
       ng-click="leaveGroup()"
       ng-show="isCurrentUserAttended()"><i
            class="fa fa-thumbs-down"></i>Leave</a>
    <br><br>
</div>

<div class="ibox-content">

    <section ng-controller="TabCtrl">
        <tabset>
            <tab ng-click="selectTab(1)">
                <tab-heading>
                    Comments
                </tab-heading>

            </tab>

            <tab ng-click="selectTab(2)">
                <tab-heading>
                    Groupies
                </tab-heading>

            </tab>
        </tabset>

        <br>

            <div class='ibox-content' ng-show="isSelected(1)">

                <comment-template item-comment="selectedItem.comments"
                                  add-comment-callback="addGroupCommentForView"></comment-template>

            </div>

        <div class='ibox-content' ng-show="isSelected(2)">

            <div class="feed-activity-list"
                 ng-repeat="participant in selectedItem.groupParticipantList">

                <div class="feed-element">

                    <!--<a ui-sref="profile.specificUser({userToBeViewed: participant.participantUserId})" class="pull-left">
                        <img alt="image" class="img-circle" src="img/a5.jpg">
                    </a>-->

                    <div class="media-body ">

                        <a ui-sref="profile.specificUser({userToBeViewed: participant.participantUserId})"
                           class="pull-left"><strong>{{participant.participantUserName}}</strong> is attending...</a>

                    </div>

                </div>

            </div>

        </div>

    </section>
</div>